<template>
  <div class="bg">
    <div style="padding:10px;" v-if="imgList.length>0" class="bg_f sw_img">
      <OrderImgs :imgList="imgList"></OrderImgs>
    </div>
    <OrderItem :info="info" :type="'detail'"></OrderItem>
    <NewGoodList :goodList="goodList" :type="'detail'"></NewGoodList>
      <TaskList :taskList="taskList"></TaskList>
    <div class="detail_f">
      <div class="wl_head">物流信息</div>
      <div
        class="status_item flex"
        :class="index==0?'activeItem':''"
        v-for="(item, index) in realStatus"
        :key="index"
      >
        <div class="line_box">
          <span class="line_span" v-if="index!=(realStatus.length-1)"></span>
          <span class="circle_span"></span>
        </div>
        <div class="status_right">
          <p>{{item.remark}}</p>
          <p class="order_date" :class="index==0?'':'color9'">{{item.time}}</p>
        </div>
      </div>
    </div>
    <EditGood v-on:checkGood='checkGood' :digType="'detail'"></EditGood>
  </div>
</template>

<script>
import OrderImgs from "@/components/OrderImgs";
import OrderItem from "@/components/OrderItemDetail";
import GoodList from "@/components/GoodList";
import NewGoodList from "@/components/NewGoodList";
import TaskList from "@/components/TaskList";
import EditGood from "@/components/EditGood";

//
import api from "@/utils/api";
export default {
  components: {
    OrderItem,
    GoodList,
    OrderImgs,
    TaskList,
    EditGood,
    NewGoodList
  },
  data() {
    return {
      orderId: "",
      info: { },
      detailStatus: [],
      goodList: [],
      imgList: [],
      taskList: []
    };
  },
  mounted() {
    wx.setNavigationBarTitle({
      title: "订单详情"
    });
    let { query } = this.$route;
    if (query && query.orderId) {
      this.orderId = query.orderId;
      this.getDetail();
      this.getLog();
      this.getImgs();
    }
  },
  methods: {
    checkGood(data){
      console.log('data',data)
      api.taskUpdate(data).then(res=>{
        console.log('添加任务',res)
        if(res&&res.code==0){
          this.taskList.push(data)
          this.toastSuccess(res.msg)
        }else{
          this.toastError(res.msg)
        }
      }).catch(err=>{
        this.toastError('网络繁忙！')

      })


    },
    getImgs() {
      let option = {
        orderId: this.orderId
      };
      console.log("option", option);
      this.imgList = [];
      api
        .orderImages(option)
        .then(res => {
          console.log("获取商品图片", res);
          if (res && res.code == 0) {
            if (res.data.length > 0) {
              this.imgList = res.data;
            }
          }
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    getDetail() {
      let option = {
        orderId: this.orderId
      };
      api
        .orderDetail(option)
        .then(res => {
          console.log("订单详情", res);
          if (res && res.code == 0) {
            this.info = res.data;
            this.goodList = res.data.orderProducts;
            this.taskList = res.data.taskLists;
          } else {
            this.toastError(res.msg);
          }
        })
        .catch(err => {
          console.log("err", err);
          this.toastError("网络繁忙!");
        });
    },
    getLog() {
      let option = {
        orderId: this.orderId
      };
      api
        .orderLogs(option)
        .then(res => {
          console.log("详情日记", res);
          this.detailStatus = res.data;
        })
        .catch(err => {
          console.log("err", err);
        });
    }
  },
  computed: {
    realStatus() {
      let dStatus = this.detailStatus;
      dStatus = dStatus.map(data => {
        data.statusName = "待发货";
        switch (data.status) {
          case 1:
            data.statusName = "已发车";
            break;
          case 2:
            data.statusName = "待派送";
            break;
          case 3:
            data.statusName = "运输中";
            break;
          default:
            break;
        }
        return data;
      });
      return dStatus;
    }
  }
};
</script>

<style scoped>
.bg {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.detail_f {
  background-color: #fff;
  padding: 15px;
  margin: 10px 0;
}
.detail_f .wl_head {
  font-size: 16px;
  margin-bottom: 6px;
}

.status_item {
  color: #999;
  padding-bottom: 10px;
  align-items: center;
}

.user_msg {
  color: #999;
}

.line {
  border: 1px dashed #666;
  margin: 0 15px;
}
.order_date {
  font-size: 12px;
}
.line_box {
  position: relative;
  margin-right: 15px;
}
.line_box span {
  display: inline-block;
}
.line_span {
  height: 60px;
  width: 1px;
  background: #999;
  /* border: 1px solid #eee; */
  position: absolute;
  top: 20px;
  left: 4px;
}
.circle_span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #999;
}
.activeItem {
  color: red;
}
.activeItem {
  color: red;
}

.activeItem .line_span {
  background: linear-gradient(red 10%, #999 85%, #999 90%);
}
.activeItem .circle_span {
  background-color: red;
}
.sw_img {
  margin-bottom: 10px;
}
</style>
